<template>
  <div class="app-container">
    <div class="canvas-box">
      <canvas ref="canvas" id="canvas" class="canvas"></canvas>
    </div>
    <div class="timeline-box">
      <el-slider v-model="timeValue" @change="draw"></el-slider>
    </div>
    <div class="controls">
      <el-button :disabled="isAnimating" @click="startAnimation">播放</el-button>
      <el-button :disabled="!isAnimating" @click="pauseAnimation">暂停</el-button>
      <el-select v-model="playbackSpeed" size="medium" @change="onPlaybackSpeedChange" style="margin-left: 20px">
        <el-option v-for="speed in playbackSpeedOptions" :key="speed.value" :label="speed.label" :value="speed.value"></el-option>
      </el-select>
    </div>
  </div>

</template>

<script>
import { drawTrack, drawTrackSleeper} from './rail'
export default {
  name: 'CanvasTrack',
  data () {
    return {
      canvas: null,
      canvasContext: null,
      timeValue: 0,
      isAnimating: false,
      animationId: null,
      playbackSpeed: 1, // 默认播放速度为1倍速
      playbackSpeedOptions: [ // 倍速选项数组
        { label: '0.25x', value: 0.25 },
        { label: '0.5x', value: 0.5 },
        { label: '1x', value: 1 },
        { label: '1.5x', value: 1.5 },
        { label: '2x', value: 2 }
      ]
    }
  },
  methods: {
    initCanvas () {
      this.animationId = null
      this.canvas = new fabric.Canvas('canvas', {
        width: 2230,
        height: 860,
        selection: false
      })
    },
    clearAll () {
      this.canvas.clear().renderAll()
    },
    draw () {
      this.clearAll()
      for (let i = 50; i <= 2200; i += 120) {
        drawTrackSleeper(this.canvas, i, 110, i, 400, 30, '#303030', this.timeValue)
      }
      drawTrack(this.canvas, 40, 150, 2180, 150, 15)
      drawTrack(this.canvas, 40, 350, 2180, 350, 15)
    },
    drawSleeper () {
    },
    startAnimation () {
      if (!this.isAnimating) {
        this.isAnimating = true
        this.animateFrame()
      }
    },
    pauseAnimation () {
      if (this.isAnimating) {
        clearInterval(this.animationId)
        this.isAnimating = false
      }
    },
    onPlaybackSpeedChange (speed) {
      this.playbackSpeed = speed
      // 如果正在播放，调整动画速度后可能需要重新计算或调整动画状态
      if (this.isAnimating) {
        this.pauseAnimation() // 先暂停
        setTimeout(() => {
          this.startAnimation() // 再按照新的速度开始
        }, 0)
      }
    },
    animateFrame () {
      this.timeValue += this.playbackSpeed // 使用当前倍速更新时间值
      this.draw()
      this.animationId = setTimeout(() => {
        this.animateFrame()
      }, 1000 / Math.max(1, 60 / this.playbackSpeed)) // 确保至少每秒一帧，且不超过60fps
    }
  },
  created () {
  },
  mounted () {
    this.initCanvas()
    this.drawSleeper()
    this.draw()
  },
  destroyed () {
  }
}
</script>

<style scoped>
  .app-container{
    width: 100%;
    height: 100vh;
    padding: 20px;
  }
  .canvas-box{
    width: calc(100% - 40px);
    height: 75%;
    border: #999999 1px solid;
    border-radius: 8px;
  }
  .canvas{
    width: 100%;
    height: 100%;
  }
  .timeline-box {
    padding: 20px 0;
    width: calc(100% - 40px);
  }
  /* ...原有样式... */
  .controls {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }
</style>
